<template>
  <view
    class="relative z-10 flex flex-shrink-0 items-center justify-between border-b-1 border-b-[#eee] bg-white"
    :style="headerStyle"
  >
    <view class="ml-20rpx h-60rpx w-60rpx flex items-center justify-center" @tap="onBack">
      <image src="https://ceshiweb.picaime.com/static/images/order/back.png" class="h-36rpx w-36rpx" mode="aspectFit" />
    </view>
    <view class="pointer-events-none absolute left-0 right-0 flex items-center justify-center">
      <text class="text-36rpx text-black font-bold leading-[49.4rpx] tracking-0">
        {{ title }}
      </text>
    </view>
    <view class="mr-20rpx">
      <slot name="right" />
    </view>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { computed, onMounted, ref } from 'vue';

defineOptions({
  name: 'S1Header',
});

defineProps({
  title: {
    type: String,
    default: '赊欠录入',
  },
  onBack: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

// 获取胶囊按钮的位置信息
const menuButtonInfo = ref<UniApp.GetMenuButtonBoundingClientRectRes | null>(null);
const statusBarHeight = ref(0);

onMounted(() => {
  // #ifdef MP-WEIXIN
  // 获取胶囊按钮位置信息
  menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
  // 获取系统信息中的状态栏高度
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
  // #endif
});

// 计算导航栏样式
const headerStyle = computed(() => {
  if (!menuButtonInfo.value) {
    // 默认样式
    return {
      paddingTop: '80rpx',
      height: '90rpx',
    };
  }

  // 胶囊按钮的高度
  const menuButtonHeight = menuButtonInfo.value.height;
  // 胶囊按钮的上边距(距离顶部的距离)
  const menuButtonTop = menuButtonInfo.value.top;
  // 状态栏高度
  const statusBar = statusBarHeight.value;
  
  // 导航栏高度 = 胶囊按钮高度 + (胶囊按钮距离顶部的距离 - 状态栏高度) * 2
  // 这样可以确保导航栏内容垂直居中对齐胶囊
  const navigationBarHeight = menuButtonHeight + (menuButtonTop - statusBar) * 2;
  
  return {
    paddingTop: `${statusBar}px`,
    height: `${navigationBarHeight}px`,
  };
});
</script>

<style scoped>
/* 不再需要这个背景图样式，因为我们现在使用image元素 */
</style>
